<template>
  <div class="ht-footer">
    <div class="ht-footer-logo">
      <NuxtLink to="/">
        <img src="~/assets/logo.png" alt=""/>
      </NuxtLink>
    </div>
    <div class="ht-footer-NI">
      <div class="ht-footer-nav">
        <template v-for="item in navList">
          <div class="ht-footer-nav-item">
            <template v-if="item.id!==6&&item.id!==3">
              <div class="ht-footer-nav-item-title">{{ item['programaName'] }}</div>
              <div class="ht-footer-nav-item-links" v-for="i in item['children']">
                <NuxtLink :to="`${item['router']}?type=${i.id}`" target="_blank">{{ i['programaName'] }}</NuxtLink>
              </div>
            </template>
            <template v-if="item.id===3">
              <div class="ht-footer-nav-item-title">{{ item['programaName'] }}</div>
              <div class="ht-footer-nav-item-links" v-for="i in item['children']">
                <NuxtLink :to="`${item['router']}/${i.id}`" target="_blank">{{ i['programaName'] }}</NuxtLink>
              </div>
            </template>
            <template v-if="item.id==6">
              <div class="ht-footer-nav-item-title">{{ item['programaName'] }}</div>
              <div class="ht-footer-nav-item-links" v-for="i in item['children']">
                <template v-if="i.id!==11&&i.id!==14">
                  <NuxtLink :to="`${i['router']}`" target="_blank">{{ i['programaName'] }}</NuxtLink>
                </template>
                <template v-else>
                  <NuxtLink :to="`${item['router']}?type=${i.id}`" target="_blank">{{ i['programaName'] }}</NuxtLink>
                </template>
              </div>
            </template>
          </div>
        </template>
      </div>
      <div class="ht-footer-info">
        <div class="ht-footer-info-item">
          <img class="footer-icon" src="~/assets/icons/icon_bottom_tel.png" alt=""/>
          <span class="footer-title">咨询热线 ：</span>
          <span class="footer-content font-heavy">{{ baseInfo.phone }}</span>
        </div>
        <div class="ht-footer-info-item">
          <img class="footer-icon" src="~/assets/icons/icon_bottom_email.png" alt=""/>
          <span class="footer-title">电子邮箱 ：</span>
          <span class="footer-content">{{ baseInfo.mailbox }}</span>
        </div>
        <div class="ht-footer-info-item">
          <img class="footer-icon" src="~/assets/icons/icon_bottom_local.png" alt=""/>
          <span class="footer-title">总部地址 ：</span>
          <span class="footer-content">{{ baseInfo.address }}</span>
        </div>
        <div class="ht-footer-more">
          <div class="ht-footer-friendly">
            <div class="select-wrapper" @click="openSelect">友情链接</div>
            <div class="select-list" :class="showSelect?'active':''" @click="openSelect">
              <template v-if="linkList.length">
                <NuxtLink :to="item.url" v-for="item in linkList" :key="item.id" target="_blank" :title="item.title">
                  {{ item.title }}
                </NuxtLink>
              </template>
              <template v-else><a>暂无数据</a></template>
            </div>
          </div>
          <div class="ht-footer-wechat">
            <img class="ht-footer-wechat-icon" src="~/assets/icons/icon_bottom_wechat.png"/>
            <div class="ht-footer-qr-content">
              <img src="~/assets/images/qr-code.jpg" alt=""/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ht-footer-cpr">
      <div>
        <NuxtLink to="/sitemap.xml" target="_blank">网站地图</NuxtLink>
        |
        <NuxtLink to="/">隐私条款</NuxtLink>
      </div>
      <div>
        <span>{{ baseInfo.copyRight }}</span>
        <span class="icp-no">
          <a target="_blank" :href="baseInfo.icpUrl?baseInfo.icpUrl:'https://beian.miit.gov.cn/'">备案号： {{
              baseInfo.icp ? baseInfo.icp : '浙ICP备14007666号'
            }}</a>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {getLinks, getNavHeadServer, getWebSiteBaseInfo} from "@/api/common";

const YEAR = ref(2024);
YEAR.value = new Date().getFullYear();
const navList = ref([])
const showSelect = ref(false)
const baseInfo = ref({
  copyRight: '',
  address: '',
  icpUrl: '',
  icp: '',
  mailbox: '',
  phone: '',
})
const linkList = ref([])

async function getNavInfo() {
  const {data} = await getNavHeadServer()
  navList.value = data
}

async function getBaseInfo() {
  const {data} = await getWebSiteBaseInfo()
  baseInfo.value = data
}

const getFooterLinks = async () => {
  const {data} = await getLinks()
  if (data) {
    linkList.value = data
  }
}
getNavInfo()
getBaseInfo()
getFooterLinks()
const openSelect = () => {
  showSelect.value = !showSelect.value
  if (!linkList.value.length) {
    setTimeout(() => {
      showSelect.value = false
    }, 1500)
  }
}
const routerMap = {
  2: 'product',
  3: 'solution',
  4: 'partner',
  5: 'cases',
  6: 'about',
}
</script>

<style lang="scss">
.ht-footer {
  width: 100%;
  min-height: 8.95rem;
  background: #f5f7fa;
  position: relative;
  z-index: 1;

  .ht-footer-logo {
    user-select: none;
    height: 1.64rem;
    padding-top: 0.6rem;
    padding-left: 0.81rem;
    border-bottom: 0.01rem solid rgba(17, 17, 17, 0.09);

    img {
      width: 2.8rem;
      height: 0.8875rem;
    }
  }

  // 底部导航和信息 nav&info
  .ht-footer-NI {
    display: flex;
    min-height: 6.56rem;
    padding: 0 0.81rem;
    padding-left: 0.83rem;

    .ht-footer-nav {
      width: 14.82rem;
      padding-top: 0.98rem;
      display: flex;
      // justify-content: space-between;

      .ht-footer-nav-item {
        &:nth-child(1) {
          margin-right: 1.7rem;
        }

        &:nth-child(2) {
          margin-right: 1.7rem;
        }

        &:nth-child(3) {
          margin-right: 1.64rem;
        }

        &:nth-child(4) {
          margin-right: 1.7rem;
        }

        .ht-footer-nav-item-title {
          font-size: 0.25rem;
          font-family: HarmonyOS Sans SC, sans-serif;
          font-weight: 500;
          color: #111;
          margin-bottom: 0.4rem;
        }

        .ht-footer-nav-item-links {
          height: 0.6rem;
          letter-spacing: 0.1px;

          a {
            display: inline-block;
            margin-bottom: 0.23rem;
            font-size: 0.2rem;
            font-family: HarmonyOS Sans SC, sans-serif;
            font-weight: 400;
            color: #11111180;

            &:hover {
              color: #111111ff;
            }
          }
        }
      }
    }

    .ht-footer-info {
      padding: 1rem 0 0 1rem;
      border-left: 0.01rem solid rgba(17, 17, 17, 0.09);

      .ht-footer-info-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.26rem;
        font-size: 0.2rem;

        .footer-icon {
          width: 0.34rem;
          height: 0.34rem;
          border-radius: 100%;
        }

        .footer-title {
          margin-left: 0.21rem;
        }

        .footer-content {
          &.font-heavy {
            font-weight: bold;
          }
        }
      }

      .ht-footer-more {
        display: flex;
        margin-top: 0.5rem;

        .ht-footer-friendly {
          position: relative;
          //&:hover{
          //  .select-list{
          //    display: block;
          //  }
          //}

          .select-wrapper {
            user-select: none;
            outline: none;
            padding-left: 0.26rem;
            font-size: 0.18rem;
            width: 1.75rem;
            height: 0.5rem;
            line-height: 0.5rem;
            border-radius: 0.25rem;
            cursor: pointer;
            border: 0.01rem solid #999999;
            background-image: url(~/assets/icons/delta.png);
            background-position: 1.3rem center;
            background-repeat: no-repeat;
            background-size: 0.15rem;
          }

          .select-list {
            position: absolute;
            top: 0.6rem;
            left: 0;
            background: #fff;
            max-height: 1.5rem;
            overflow-y: scroll;
            padding: 0.1rem 0;
            display: none;

            &.active {
              display: block;
            }

            &::-webkit-scrollbar {
              display: none;
            }

            a {
              width: 1.75rem;
              height: 0.4rem;
              display: block;
              padding-left: 0.26rem;
              line-height: 0.4rem;
              text-overflow: ellipsis; // 超出用省略号显示
              overflow: hidden; // 超出的文本隐藏
              display: -webkit-box; // 作为弹性伸缩盒子模型显示
              -webkit-line-clamp: 1; // 显示的行
              -webkit-box-orient: vertical;
            }
          }
        }

        .ht-footer-wechat {
          display: flex;
          align-items: center;
          position: relative;
          margin-left: 0.35rem;

          .ht-footer-wechat-icon {
            width: 0.34rem;
            height: 0.34rem;
            border-radius: 100%;
          }

          &:hover {
            .ht-footer-qr-content {
              opacity: 1;
            }
          }

          .ht-footer-qr-content {
            position: absolute;
            height: 0;
            left: 0.56rem;
            top: 0;

            img {
              padding: 0.051rem;
              background-color: #fff;
              width: 1.601rem;
              height: 1.601rem;
            }

            &::after {
              //content: '';
              //position: absolute;
              //top: 0;
              //left: 0;
              //transform: translate3d(-74%, 49%, 0); /* 使三角形的顶点垂直居中 */
              //border-style: solid;
              //border-width: 6px 10px 6px 0; /* 上、右、下、左的边框宽度 */
              //border-color: transparent #fff transparent transparent;
            }
          }
        }
      }
    }
  }

  .ht-footer-cpr {
    width: 100%;
    height: 0.75rem;
    padding: 0 0.81rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #11111180;
    font-size: 0.16rem;
    border-top: 0.01rem solid rgba(17, 17, 17, 0.09);

    a {
      font-size: 0.16rem;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 400;
      color: #11111180;
    }

    .icp-no {
      margin-left: 0.5rem;
    }
  }
}
</style>
